/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {isParentEdas} from '@/lib';
import {Balloon, Button, ConfigProvider, Dialog, Form, Icon, Select, Upload} from '@alifd/next';

import './index.scss';

const FormItem = Form.Item;

/**
 * @deprecated
 */
@ConfigProvider.config
class ImportDialog extends React.Component {
    static displayName = 'ImportDialog';

    constructor(props) {
        super(props);
        this.formItemLayout = {
            labelCol: {
                fixedSpan: 4,
            },
            wrapperCol: {
                span: 20,
            },
        };
        this.defaultPolicy = 'abort';
        this.state = {
            visible: false,
            serverId: '',
            tenant: '',
            policy: this.defaultPolicy,
            policyLabel: '',
            allPolicy: [],
        };
    }

    componentDidMount() {
        const {locale = {}} = this.props;
        this.setState({
            policyLabel: locale.terminate,
            allPolicy: [
                {value: 'abort', label: locale.terminate},
                {value: 'skip', label: locale.skip},
                {value: 'overwrite', label: locale.overwrite},
            ],
        });
    }

    openDialog(payload, callback) {
        this.callback = callback;
        this.setState({
            visible: true,
            serverId: payload.serverId,
            tenant: payload.tenant,
        });
    }

    closeDialog = () => {
        this.setState({
            visible: false,
        });
    };

    setPolicy = (...value) => {
        this.setState({
            policyLabel: value[1].label,
            policy: value[0],
        });
    };

    formatter = res => {
        if (res.code === 200) {
            return {
                code: '0',
                retData: res,
            };
        } else {
            return {
                code: '1',
                error: {
                    message: res.message,
                },
                retData: res,
            };
        }
    };

    render() {
        const {locale = {}} = this.props;
        let uploadLink = `/diamond-ops/batch/import/serverId/${this.state.serverId}/tenant/${
            this.state.tenant.id
        }?policy=${this.state.policy}`;

        if (isParentEdas()) {
            uploadLink = `/authgw/${window.edasprefix}${uploadLink}`;
        }
        const helpTip = (
            < Balloon
        trigger = {
            < span >
            Data
        ID
        {
            ' '
        }
    <
        Icon
        type = "help"
        size = "small"
        style = {
        {
            color: '#1DC11D', marginRight
        :
            5, verticalAlign
        :
            'middle'
        }
    }
        />
        < /span>
    }
        align = "t"
        style = {
        {
            marginRight: 5
        }
    }
        triggerType = "hover"
            >
            < a
        href = {window._getLink && window._getLink('knowDataid')}
        target = "_blank" >
            {locale.zipFileFormat}
            < /a>
            < /Balloon>
    )
        ;
        const footer = (
            < div >
            < Upload
        listType = {'text'}
        action = {uploadLink}
        limit = {1}
        accept = {'.zip'}
        onSuccess = {(...args)
    =>
        {
            this.callback(args[0].retData, this.state.policyLabel);
            this.closeDialog();
        }
    }
        onError = {(...args)
    =>
        {
            this.callback(args[0].response.retData, this.state.policyLabel);
            this.closeDialog();
        }
    }
        formatter = {this.formatter}
        headers = {
        {
            poweredBy: 'simpleMVC', projectName
        :
            'nacos'
        }
    }
    >
    <
        Button
        type = {'primary'} > {locale.uploadFile} < /Button>
            < /Upload>
            < /div>
    )
        ;

        return (
            < div >
            < Dialog
        visible = {this.state.visible}
        footer = {footer}
        footerAlign = "center"
        style = {
        {
            width: 480
        }
    }
        onCancel = {this.closeDialog}
        onClose = {this.closeDialog}
        title = {`${locale.importLabel + this.state.serverId}）`
    }
    >
    <
        Form >
        < FormItem
        label = {locale.target}
        {...
            this.formItemLayout
        }
    >
    <
        p >
        < span
        style = {
        {
            color: '#33cde5'
        }
    }>
        {
            this.state.tenant.name
        }
    <
        /span>
        {
            ` | ${this.state.tenant.id}`
        }
    <
        /p>
        < /FormItem>
        < FormItem
        label = {locale.conflict}
        {...
            this.formItemLayout
        }
    >
    <
        Select
        size = {'medium'}
        hasArrow
        defaultValue = {this.defaultPolicy}
        dataSource = {this.state.allPolicy}
        onChange = {this.setPolicy}
        />
        < /FormItem>
        < /Form>

        < div
        style = {
        {
            textAlign: 'center'
        }
    }>
    <
        Icon
        type = {'warning'}
        style = {
        {
            color: '#ff8a00', marginRight
        :
            5, verticalAlign
        :
            'middle'
        }
    }
        />
        {
            locale.beSureExerciseCaution
        }
        {
            helpTip
        }
    <
        /div>
        < /Dialog>
        < /div>
    )
        ;
    }
}

export default ImportDialog;
